<template>
  <b-container fluid>
    <NavigationBar />
    <b-row class="background">
      <b-container>
        <b-row :style="{height:BoxHeight+'px'}" align-h="center">
          <transition appear name="animate__animated animate__bounce" enter-active-class="animate__backInUp" leave-to-class="animate__backOutLeft">
            <!-- 登录框 -->
            <b-col v-show="display" align-self="center" class="loginCard border rounded-lg col-6 mt-5">
              <!-- 账户 -->
              <b-row class="mt-5 justify-content-center">
                <b-col class="col-1 text-right px-0">
                  <span>邮箱: </span>
                </b-col>
                <b-col class="col-7">
                  <b-form-input type="email" size="sm" v-model="loginEmail" />
                </b-col>
              </b-row>
              <!-- 密码 -->
              <b-row class="justify-content-center mt-4">
                <b-col class="col-1 text-right px-0">
                  <span>密码: </span>
                </b-col>
                <b-col class="col-7">
                  <b-form-input type="password" :state="loginState" size="sm" v-model="loginPassword" aria-describedby="password" />
                  <b-form-invalid-feedback id="password">
                    {{underPassword}}
                  </b-form-invalid-feedback>
                </b-col>
              </b-row>
              <!-- 没有注册 -->
              <b-row class="justify-content-center" :class="loginState == false ? 'mt-2':'mt-4'">
                <b-col class="col-1 px-0" />
                <b-col class="col-7 text-right">
                  <b-link @click="display = false" class="iconfont icon-operation text-decoration-none ml-3">没有账号?点击注册</b-link>
                </b-col>
              </b-row>
              <!-- 登录按钮 -->
              <b-row class="justify-content-center mt-5">
                <b-col class="col-8">
                  <b-btn @click="toLogin" class="w-100 border-0 login">登录</b-btn>
                </b-col>
              </b-row>
            </b-col>
          </transition>

          <transition appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInUp" leave-to-class="animate__backOutLeft">
            <!-- 注册框 -->
            <b-col v-show="!display" align-self="center" class="registerCard border rounded-lg col-6 mt-5">
              <!-- 返回按钮 -->
              <b-row class="mt-3 ml-2">
                <b-link @click="display = true" style="font-size:20px" class="text-decoration-none iconfont icon-direction-left">返回</b-link>
              </b-row>
              <!-- 账户 -->
              <b-row class="mt-4 justify-content-center">
                <b-col class="col-1 text-right px-0">
                  <span>邮箱: </span>
                </b-col>
                <b-col class="col-7">
                  <b-form-input @blur="affirm(1)" type="email" :state="email.state" size="sm" v-model="email.content" aria-describedby="email" />
                  <b-form-invalid-feedback id="email">
                    {{email.callBackText}}
                  </b-form-invalid-feedback>
                </b-col>
              </b-row>
              <!-- 昵称 -->
              <b-row class="justify-content-center" :class="email.state == false ? 'mt-1':'mt-4'">
                <b-col class="col-1 text-right px-0">
                  <span>昵称: </span>
                </b-col>
                <b-col class="col-7">
                  <b-form-input @blur="affirm(2)" maxlength="8" type="text" :state="name.state" size="sm" v-model="name.content" aria-describedby="name" />
                  <b-form-invalid-feedback id="name">
                    {{name.callBackText}}
                  </b-form-invalid-feedback>
                </b-col>
              </b-row>
              <!-- 密码 -->
              <b-row class="justify-content-center" :class="name.state == false ? 'mt-1':'mt-4'">
                <b-col class="col-1 text-right px-0">
                  <span>密码: </span>
                </b-col>
                <b-col class="col-7">
                  <b-form-input @blur="affirm(3)" maxlength="16" type="password" size="sm" :state="password.state" v-model="password.content"
                    aria-describedby="password" />
                  <b-form-invalid-feedback id="password">
                    {{password.callBackText}}
                  </b-form-invalid-feedback>
                </b-col>
              </b-row>
              <!-- 确认密码 -->
              <b-row class="justify-content-center" :class="password.state == false ? 'mt-1':'mt-4'">
                <b-col class="col-1 text-right px-0">
                  <span>确认: </span>
                </b-col>
                <b-col class="col-7">
                  <b-form-input @blur="affirm(4)" maxlength="16" placeholder="重复密码" type="password" :state="password2.state" size="sm"
                    v-model="password2.content" aria-describedby="password2" />
                  <b-form-invalid-feedback id="password2">
                    {{password2.callBackText}}
                  </b-form-invalid-feedback>
                </b-col>
              </b-row>
              <!-- 邮箱验证码 -->
              <b-row class="justify-content-center" :class="password2.state == false ? 'mt-1':'mt-4'">
                <b-col class="col-1 text-right px-0">
                  <span style="font-size:12px">验证码: </span>
                </b-col>
                <b-col class="col-4">
                  <b-form-input @blur="affirm(5)" maxlength="6" placeholder="邮箱验证码" type="text" :state="code.state" size="sm" v-model="code.content"
                    aria-describedby="code" />
                  <b-form-invalid-feedback id="code">
                    {{code.callBackText}}
                  </b-form-invalid-feedback>
                </b-col>
                <b-col class="col-3 text-right">
                  <b-link @click="sendEmail" v-show="emailShow == 30" class="text-decoration-none">点击发送</b-link>
                  <span v-show="emailShow < 30" class="text-primary">重试({{emailShow}})</span>
                </b-col>
              </b-row>
              <!-- 注册按钮 -->
              <b-row class="justify-content-center mt-5">
                <b-col class="col-8">
                  <b-btn @click="toRegister" class="w-100 border-0 bg-danger">注册</b-btn>
                </b-col>
              </b-row>
            </b-col>
          </transition>
        </b-row>
      </b-container>
    </b-row>
  </b-container>

</template>
<script>
import toastr from 'toastr';
import NavigationBar from '../NavigationBar'
export default {
  components: {
    NavigationBar,
  },
  data() {
    return {
      //控制注册界面的显示
      display: true,
      //控制邮箱验证码按钮是否显示
      emailShow: 30,
      time: null,
      //登录框的一些控制变量
      loginEmail: null,
      loginPassword: null,
      loginState: null,
      underPassword: "",
      //各输入框对象
      email: {
        name: "邮箱",
        content: "",
        state: null,
        callBackText: "",
      },
      name: {
        name: "昵称",
        content: "",
        state: null,
        callBackText: "",
      },
      password: {
        name: "密码",
        content: "",
        state: null,
        callBackText: "",
      },
      password2: {
        name: "重复密码",
        content: "",
        state: null,
        callBackText: "",
      },
      code: {
        name: "验证码",
        content: "",
        state: null,
        callBackText: "",
      },
      BoxHeight: null,
    }
  },
  mounted() {
    //注册成功返回提示
    if (this.$route.query.register == "success") {
      toastr.success('注册成功!', '', { timeOut: 3000 });
    }
    //获取可视宽高
    this.BoxHeight = document.documentElement.clientHeight;
  },
  methods: {
    //发送邮箱验证请求
    sendEmail() {
      this.affirm(1);
      if (!this.email.state) {
        toastr.warning('请先填邮箱!', '', { timeOut: 3000 });
        return
      }
      this.$httpUser.sendEmailCode(this.email.content).then((res) => {
        if (res == true) {
          this.emailShow--;
          this.time = setInterval(this.emailWait, 1000);
        } else {
          toastr.error('出现错误!', '稍后重试', { timeOut: 3000 });
        }
      })
    },
    //执行倒计时操作
    emailWait() {
      this.emailShow--;
      if (this.emailShow < 0) {
        clearInterval(this.time);
        this.emailShow = 30;
      }
      // console.log(this.emailShow);
    },
    // 登录操作
    toLogin() {
      if (this.loginPassword == null || this.loginEmail == null) {
        this.loginState = false;
        this.underPassword = "请填写邮箱或密码";
        return
      }
      this.$httpUser.login(this.loginEmail, this.loginPassword).then((res) => {
        if (res == true) {
          //跳转到首页
          this.$router.replace({
            path: '/HomePage',
          });
        } else {
          this.loginState = false;
          this.underPassword = "用户名或密码错误";
        }
      })

    },
    //注册操作
    toRegister() {
      for (let i = 1; i < 6; i++) {
        this.affirm(i);
      }
      if (!(this.email.state && this.name.state && this.password.state && this.password2.state && this.code.state)) {
        toastr.error('如果无误请重新点击', '请将表单填完!', { timeOut: 2000 });
        return
      }
      var data = JSON.stringify({
        email: this.email.content,
        name: this.name.content,
        password: this.password.content,
      })
      this.$httpUser.register(data).then((res) => {
        if (res == true) {
          this.$route.query.register = "success";
          window.location.reload();
        }
      })

    },
    //失焦后操作
    affirm(id) {
      var obj;
      switch (id) {
        case 1: obj = this.email; break;
        case 2: obj = this.name; break;
        case 3: obj = this.password; break;
        case 4: obj = this.password2; break;
        case 5: obj = this.code; break;
      }
      if (obj.content == null) {
        obj.state = false;
        obj.callBackText = obj.name + "不能为空";
        return
      }
      //清空空字符
      obj.content = obj.content.replace(/\s+/g, '');
      if (obj.content.length == 0) {
        obj.state = false;
        obj.callBackText = obj.name + "不能为空";
        return
      }
      if (obj.name == "邮箱") {
        this.$httpUser.affirm("email", obj.content).then((res) => {
          if (res == true) {
            obj.state = true;
          } else {
            obj.callBackText = obj.name + "已存在,请更换";
            obj.state = false;
            return
          }
        })
      } else if (obj.name == "昵称") {
        this.$httpUser.affirm("name", obj.content).then((res) => {
          if (res == true) {
            obj.state = true;
          } else {
            obj.callBackText = obj.name + "已被占用";
            obj.state = false;
            return
          }
        })
      }
      // replace(/\s+/g, '');
      if (obj.name == "密码") {
        if (obj.content.length < 8) {
          obj.state = false;
          obj.callBackText = "至少8位";
          return
        }
        if (obj.content.replace(/[0-9]/g, '').length == 0) {
          obj.state = false;
          obj.callBackText = "不能为纯数字";
          return
        }
        this.password.state = true;
        obj.state = true;
      }
      if (obj.name == "重复密码") {
        if (obj.content == this.password.content) {
          this.password.state = true;
          obj.state = true;
        } else {
          obj.state = false;
          obj.callBackText = "两次密码不一致";
          this.password.state = null;
          return
        }
      }
      if (obj.name == "验证码") {
        this.$httpUser.code(obj.content).then((res) => {
          if (res == true) {
            obj.state = true;
            return
          }
          obj.state = false;
          obj.callBackText = "验证码错误"
        })
      }


    },
  },
}
</script>
<style scoped>
.background {
  background: url("https://t.lizi.moe/fj") center;
  background-size: 100%;
}
.form-control:focus,
.btn:focus {
  outline: none;
  box-shadow: none;
}
.loginCard {
  height: 350px;
  background-color: #f5f5f5c0;
}
.registerCard {
  height: 480px;
  background-color: #f5f5f5c0;
}
.login {
  background-color: #f16868;
}
.login:hover {
  background-color: #f0a4a4;
}
</style>
